<template>
  <div>
    <el-container>
      <!-- 侧边导航区 -->
      <el-aside max-width="150px" width="150px" class="aside-box">
        <el-menu>
          <!-- logo -->
          <div style="text-text-align:center">
            <img  src="../../assets/logo.png" alt="" class="logo" />
          </div>

          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-s-home"></i>
              首页区
            </template>
            <el-menu-item-group>
              <router-link to="/admin/initial/main">
                <el-menu-item index="1-1" class="aside-right">
                  主页
                </el-menu-item>
              </router-link>
              <router-link to="/admin/initial/personal">
                <el-menu-item index="1-2" class="aside-right">
                  个人中心
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-s-tools"></i>
              操作区
            </template>
            <el-menu-item-group>
              <router-link to="/admin/operation/homeindex">
                <el-menu-item index="2-1" class="aside-right">
                  首页管理
                </el-menu-item>
              </router-link>
              <router-link to="/admin/operation/image">
                <el-menu-item index="2-2" class="aside-right">
                  图片管理
                </el-menu-item>
              </router-link>
              <router-link to="/admin/operation/article">
                <el-menu-item index="2-3" class="aside-right">
                  随记管理
                </el-menu-item>
              </router-link>
              <router-link to="/admin/operation/Note">
                <el-menu-item index="2-4" class="aside-right">
                  笔记管理
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-s-data"></i>
              访问管理
            </template>
            <el-menu-item-group>
              <router-link to="/admin/user/message">
                <el-menu-item index="3-1" class="aside-right">
                  用户信息
                </el-menu-item>
              </router-link>
              <router-link to="/admin/user/actions">
                <el-menu-item index="3-2" class="aside-right">
                  用户操作
                </el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 顶部导航区 -->
      <el-container>
        <el-header class="header">
          <div>
            <el-breadcrumb
              separator="/"
              style="position: relative; top: 50%; transform: translateY(-50%)"
            >
              <el-breadcrumb-item :to="{ path: '/admin/initial/main' }"
                >首页</el-breadcrumb-item
              >
              <el-breadcrumb-item :to="{ path: '/admin/initial/personal' }"
                >个人中心</el-breadcrumb-item
              >
              <el-breadcrumb-item :to="{ path: '/admin/operation/article' }"
                >文章管理</el-breadcrumb-item
              >
              <el-breadcrumb-item :to="{ path: '/admin/operation/image' }"
                >图片管理</el-breadcrumb-item
              >
            </el-breadcrumb>
          </div>
          <el-dropdown>
            <div class="header-title">
              <span
                style="text-align: center; font-size: 20px; font-weight: bold"
              >
                Bsea博客
                <i
                  class="el-icon-setting"
                  style="margin-right: 15px; font-size: 20px"
                ></i>
              </span>
            </div>

            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <router-link to="/admin/initial/personal">个人中心</router-link>
              </el-dropdown-item>
              <router-link to="/admin/logout">
                <el-dropdown-item> 退出登陆 </el-dropdown-item></router-link
              >
            </el-dropdown-menu>
          </el-dropdown>
          <!-- <span style="font-size: 20px">{{ this.user }}</span> -->
        </el-header>
        <!-- 内容区 -->
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  name: "AdminIndex",
  data() {
    return {
      // user: this.$route.params.user,
      // isLogin: this.$route.params.isLogin
      message: false,
      username: "",
    };
  },
  beforeCreate() {
    if (this.$store.state.admin_islogin != true) {
      this.$router.push({
        name: "AdminLogin",
      });
    }
  },
  created() {
    if (this.$store.state.admin_islogin != true) {
      this.$router.push({
        name: "AdminLogin",
      });
    }
    this.username = this.$store.state.admin_username;

    // console.log(this.$store.state.admin_username);
    // console.log(this.username);
  },
  updated() {},
  // beforeRouteEnter(to, from, next) {
  //   console.log(this.isLogin);
  //   if (this.isLogin) {
  //      next({
  //           name:"Login"  // 将跳转的路由path作为参数，登录成功后跳转到该路由
  //       });
  //   } else {
  //     next("/admin/login");
  //   }
  // },
};
</script>


<style lang="scss" scoped>
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.el-header {
  background-color: white;
  border: 1px solid #dcdfe6;
  box-shadow: 0px 0px 30px #dcdfe6;
  border-radius: 5px;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
a {
  text-decoration: none;
  color: #000;
}

.router-link-active {
  text-decoration: none;
  color: #000;
}
.el-aside {
  height: 100vh;
}
.aside-box {
  border: 1px solid #dcdfe6;
  box-shadow: 0px 0px 30px #dcdfe6;
}
.logo {
  width: 150px;
  height: 150px
}

.aside-right:hover {
  border-right: 2px solid red;
}
.header-title {
  display: inline;
  text-align: center;
}

.header {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
</style>